<template>
    <view class="  ">
        <z-paging
            ref="paging"
            v-model="dataList"
            @query="queryList">
            <template #top>
                <tn-navbar>角色管理</tn-navbar>
                
            </template>
            <view class="tn-p tn-bg-card">
                <view
                    v-for="(item, index) in dataList"
                    :key="index"
                    class="tn-shadow-md tn-p tn-mb tn-radius tn-white_bg">
                    <view class="tn-flex justify-between justify-start tn-mb-sm items-center">
                        <view>
                            <tn-button
                                type="primary"
                                shape="circle"
                                >{{ item.name[0] }}</tn-button
                            >
                            <text class="tn-text-xl tn-text-bold tn-ml-sm">{{ item.name }}</text>
                        </view> 
                    </view>
                    <view class="tn-p-xs tn-ml-0 tn-mr-0 tn-text-sm tn-grey_text">
                        <view class="tn-flex justify-between tn-mb-sm">
                            <text> 操作员： </text>
                            <text>{{item.optionUser}}</text>
                        </view>
                        <view class="tn-flex justify-between tn-mb-sm   ">
                            <text> 操作时间 </text>
                            <text>{{item.createTime}}</text>
                        </view>
                    </view>
                    <view class="  tn-mt-xs">
                        <view class="tn-flex justify-end">
                            <view class="tn-m-xs">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    border
                                    border-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="openForm('update', item.id)">
                                    <tn-icon
                                        name="coupon"
                                        size="30"
                                        color="tn-blue"></tn-icon>
                                    权限
                                </tn-button>
                            </view>
                            <view class="tn-m-xs">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="handleDelete(item.id)">
                                    <tn-icon
                                        name="delete"
                                        size="30"
                                        color="tn-red"></tn-icon>
                                    删除
                                </tn-button>
                            </view>
                        </view>
                       
                    </view>
                </view>
            </view>

            <template #loadingMoreNoMore></template>
        </z-paging>
    </view>
    <view>
        <!-- 悬浮按钮 -->
        <tn-suspend-button
            icon="add"
            size="sm"
            text-color="tn-white"
            bg-color="tn-gradient-bg__cool-5"
            @click="openForm('create')" />

        <!-- 删除弹框 -->
        <tn-modal ref="modalRef" />
        <RoleModal ref="roleModalRef" /> 
    </view>
</template>

<script setup lang="ts">
    import { onMounted, ref } from "vue";
    import TnSuspendButton from "tnuiv3p-tn-suspend-button/index.vue"; 
    import cfsheep from "@/cfsheep";
    import type { TnModalInstance } from "@/uni_modules/tuniaoui-vue3";
    import RoleModal from "./modal/role/RoleModal.vue"; 

    // ===============模拟数据 =========================
    const inputValue = ref();
    const filterData = () => {};
    // 模拟数据
    const tempList = ref([]);

    // z-paging 示例
    const paging = ref(null);
    // 数据列表
    const dataList = ref();

    const queryList = (pageNo, pageSize) => {
        // 模拟数据

        for (let i = 0; i < 10; i++) {
            tempList.value.push({
                id: i,
                name: "角色A" + i,
                optionUser: "万五", 
                createTime: '2024-01-01 12:11:11',
            });
        }
        paging.value.complete(tempList.value);
    };

    // ===========================================

    /** 添加/修改操作 */
    const roleModalRef = ref();
    const openForm = (title: string, id?: number) => {
        roleModalRef.value.open(title, id);
    };
  
    //删除ref
    const modalRef = ref<TnModalInstance>();

    /** 删除按钮操作 */
    const handleDelete = async (id: number) => {
        modalRef.value?.showModal({
            title: "提示",
            content: "是否删除角色",
            confirmText: "确定",
            cancelText: "取消",
            showCancel: true,
            cancel: () => {
                return true;
            },
            confirm: () => {
                deleteData(id);
            },
        });
    };

    // 删除逻辑
    const deleteData = (id: number) => {
        // 逻辑删除
        // 刷新列表
        paging.value.reload(true);
    }; 
</script>
<style lang="scss" scoped>
    
</style>
